.dialog-edit-visit-table,
.dialog-add-visit {
  @media screen and (min-width: 2199px) and (max-width: 3000px) {
    margin-left: 12%;
    width: 25%;
  }
  @media screen and (min-width: 1900px) and (max-width: 2200px) {
    margin-left: 14%;
    width: 31%;
  }
  @media screen and (min-width: 1600px) and (max-width: 1899px) {
    margin-left: 16.5%;
    width: 37.2%;
  }
  @media screen and (min-width: 1300px) and (max-width: 1599px) {
    margin-left: 19.3%;
    width: 43.5%;
  }
  @media screen and (min-width: 768px) and (max-width: 1299px) {
    margin-left: 20%;
    width: 46%;
  }
}
.dialog-audit-trail {
  @media screen and (min-width: 2199px) and (max-width: 3000px) {
    width: 25%;
  }
  @media screen and (min-width: 1900px) and (max-width: 2200px) {
    width: 59.5%;
  }
  @media screen and (min-width: 1600px) and (max-width: 1899px) {
    width: 71%;
  }
  @media screen and (min-width: 1300px) and (max-width: 1599px) {
    width: 83.5%;
  }
  @media screen and (min-width: 768px) and (max-width: 1299px) {
    width: 46%;
  }
}
.el-dialog__header {
  position: relative;
  .el-dialog__title {
    position: absolute;
    left: 20px;
    font-size: 1rem;
    font-weight: bold;
  }
}

.patient-reported-left {
  display: flex;
  flex-flow: column nowrap;
  > .top {
    flex: 102;
    background: #6b1685;
    overflow: auto;
    min-height: 140px;
    .subject-info {
      color: white;
      font-size: 0.88rem;
      line-height: 0.88rem;
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      padding-left: 1rem;
      padding-top: 1rem;
      > div {
        display: flex;
        margin-bottom: 10px;
        > span:first-child {
          min-width: 90px;
          text-align: left;
          text-align-last: justify;
        }
        > span:last-child {
          margin-left: 5px;
          text-align: left;
          flex: 1;
        }
      }
    }
  }
  >.top::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    // height: 5px;
    scrollbar-arrow-color:red;
  }
  >.top::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgb(215, 215, 215);
    box-shadow: inset 0 0 5px rgb(215, 215, 215);
    background: rgb(215, 215, 215);
    scrollbar-arrow-color:red;
  }
  >.top::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(215, 215, 215,0.2);
    box-shadow: inset 0 0 5px rgba(215, 215, 215,0.2);
    border-radius: 0;
    background: rgba(215, 215, 215,0.1);
  }
  >.down {
    flex: 866;
    background: #fbfbfb;
    border-right: 1px #ebeef5 solid;
    display: flex;
    flex-flow: column nowrap;
    > .visits {
      flex: 68;
      display: flex;
      flex-flow: column nowrap;
      > div {
        flex: 1;
      }
      > .icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
        // > div {
        //   width: 1rem;
        //   height: 1rem;
        //   background-size: 1rem 0.96rem;
        //   background-repeat: no-repeat;
        //   cursor: pointer;
        //   position: relative;
        //   top: 0.2rem;
        // }
        > .left {
          font-size: 16px;
          cursor: pointer;
        }
        > .right {
          font-size: 16px;
          cursor: pointer;
          position: relative;
        }
        > .colorHover:hover{
          color:#6d058c;
        }
      }
      .choose {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        align-items: center;
        .el-select {
          width: 92.5%;
        }
      }
    }
    > .form-navigation {
      flex: 776;
      > ul {
        @media screen and (min-width: 2199px) and (max-width: 3000px) {
          max-height: 900px;
        }
        @media screen and (min-width: 1900px) and (max-width: 2200px) {
          max-height: 760px;
        }
        @media screen and (min-width: 1600px) and (max-width: 1899px) {
          max-height: 620px;
        }
        @media screen and (min-width: 1300px) and (max-width: 1599px) {
          max-height: 520px;
        }
        @media screen and (min-width: 768px) and (max-width: 1299px) {
          max-height: 720px;
        }
        overflow: auto;

        > li {
          display: flex;
          flex-flow: row nowrap;
          padding: 7px 8px;
          cursor: pointer;
          border-left: 5px solid transparent;
          &:hover,
          &.active {
            color: #6b1685;
            border-color: #6b1685;
            background-color: #e8dfeb;
          }
          > * + * {
            margin-left: 0.58rem;
          }
          > span {
            width: 1rem;
            height: 0.75rem;
            background-size: 0.62rem 0.75rem;
            background-repeat: no-repeat;
          }
          > .data-0 {
            background-image: url('~@/assets/img/data-1.png');
          }
          > .data-1 {
            background-image: url('~@/assets/img/data-2.png');
          }
          > .data-2 {
            background-image: url('~@/assets/img/data-3.png');
          }
          > .data-3 {
            background-image: url('~@/assets/img/data-4.png');
          }
          > .data-4,
          > .data-5 {
            background-image: url('~@/assets/img/data-5.png');
          }
          > .frozen-2 {
            background-image: url('~@/assets/img/frozen-2.png');
          } 
          > .sign {
            width: 0.7rem;
            height: 0.75rem;
            background-size: 0.7rem 0.75rem;
          }
          /* > .sign-1 {
            background-image: url('~@/assets/edc/case/jfcm14_01.png');
          }*/
          > .sign-2 {
            background-image: url('~@/assets/img/sign-2.png');
          }
          > .sign-3 {
            background-image: url('~@/assets/img/sign-3.png');
          } 
          > .audit-box {
            display: inline-grid;
            grid-template-columns: repeat(5, 1fr);
            grid-column-gap: 0.05rem;
            position: relative;
            left: -0.05rem;
            > .audit {
              width: 0.25rem;
              height: 0.75rem;
              background-size: 0.25rem 0.75rem;
            }
            > .audit-1,
            > .audit--1 {
              background-image: url('~@/assets/img/audit-1.png');
            }
            >.audit-2 {
              background-image: url("~@/assets/img/audit-2.png");
            }
      
            >.audit-3 {
              background-image: url("~@/assets/img/audit-3.png");
            }
          }
          > .question {
            position: relative;
            top: 0.05rem;
            left: 0.3rem;
            width: 0.75rem;
            height: 0.65rem;
            background-size: 0.75rem 0.65rem;
          }
          > .question-0,> .question-1 {
            cursor: not-allowed;
            background-image: url('~@/assets/img/question-1.png');
          }
  
          > .question-2-1 {
            background-image: url('~@/assets/img/question-2-1.png');
          }
  
          > .question-2-2 {
            background-image: url('~@/assets/img/question-2-2.png');
          }
  
          > .question-3 {
            background-image: url('~@/assets/img/question-3.png');
          }
  
          > .question-4 {
            background-image: url('~@/assets/img/question-4.png');
          }

          > .text {
            width: 10rem;
            text-align: left;
            font-size: 0.875rem;
            line-height: 0.875rem;
            position: relative;
            top: 0.05rem;
            left: 0.05rem;
          }
        }
      }
      >ul::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        // height: 5px;
        scrollbar-arrow-color:red;
      }
      > ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgb(215, 215, 215);
        box-shadow: inset 0 0 5px rgb(215, 215, 215);
        background: rgb(215, 215, 215);
        scrollbar-arrow-color:red;
      }
      > ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(215, 215, 215,0.2);
        box-shadow: inset 0 0 5px rgba(215, 215, 215,0.2);
        border-radius: 0;
        background: rgba(215, 215, 215,0.1);
      }
    }
    > .blank {
      flex: 11;
    }
  }
}

.el-select-dropdown__item.selected {
  color: #6b1685 !important;
}
.el-dropdown{
  width: 10px;
  position: absolute;
  left: 10px;
  top: 10px;
  display: block;
}
.el-dropdown-link {
  display: inline-block;
  width: 1rem;
  position: absolute;
  left: -10px;
  top: -10px;
}

.option-row-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  > div {
    justify-self: flex-end;
    > i {
      width: 1rem;
      height: 1rem;
      display: inline-block;
      font-size: 16px;
      margin-right:0.2rem;
      cursor: pointer;
      &:first-child {

        &:hover {
          color: #6b1685;
        }
      }
      &:last-child {
        &:hover {
          color: #6b1685;
        }
      } 
    }
  }
}

.el-checkbox__label {
  span {
    font-size: 0.75rem;
  }
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-checkbox__inner:hover,
.el-transfer-panel__item:hover {
  color: #6b1685;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #6b1685;
  border-color: #6b1685;
}
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  font-size: 0.9rem;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #85a2d9;
  border-color: #85a2d9;
}
.el-transfer__button {
  background: #6b1685;
  height: 2rem;
  width: 2rem;
  display: inline-grid;
  justify-content: center;
  align-content: center;
}
.dialog-footer {
  text-align: right;
  .el-button:last-child {
    background-color: #6b1685;
  }
}
